<template>
  <div>
    <div>
      <HeadNav />
    </div>
    <div>
      <Nav />
    </div>
    <!-- 广告 -->
    <div class="banner">
      <div class="container">
        <h5 class="text-white">We do awesome things</h5>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">2,879</p>
              <div class="stats-text">
                <h3 class="text-white">Weddings</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">953</p>
              <div class="stats-text">
                <h3 class="text-white">Portraits</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">1,546</p>
              <div class="stats-text">
                <h3 class="text-white">Urban Style</h3>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <p class="title">今日推荐</p>
            <div class="tuijian-box">
              <el-row :gutter="20">
                <el-col :span="24">
                  <img src="../../../assets/u55.png" alt />
                  <span>8折</span>
                  <div class="grid-content bg-purple imgbox">
                    <img src="../../../assets/lxq.jpg" alt />
                    <p>
                      <span>张学友</span>
                      <span class="price">主持价格：9000</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <img src="../../../assets/u55.png" alt />
                  <span>8折</span>
                  <div class="grid-content bg-purple imgbox">
                    <img src="../../../assets/lxq.jpg" alt />
                    <p>
                      <span>张学友</span>
                      <span class="price">主持价格：9000</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <img src="../../../assets/u55.png" alt />
                  <span>8折</span>
                  <div class="grid-content bg-purple imgbox">
                    <img src="../../../assets/lxq.jpg" alt />
                    <p>
                      <span>张学友</span>
                      <span class="price">主持价格：9000</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="24">
                  <img src="../../../assets/u55.png" alt />
                  <span>8折</span>
                  <div class="grid-content bg-purple imgbox">
                    <img src="../../../assets/lxq.jpg" alt />
                    <p>
                      <span>张学友</span>
                      <span class="price">主持价格：9000</span>
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
              <div class="infobox">
                  <div class="imgbox"><img src="../../../assets/lxq.jpg" alt=""></div>
                  <div class="info">
                    <div class="infotitle">
                        <p>{{desc.name}}<span>服务价格：{{desc.price}}元</span></p>
                    </div>
                    <div class="desc">
                        <p><span>年龄：30</span></p>
                        <p><span>身高：177cm</span></p>
                        <p><span>体重：75KG</span></p>
                        <p><span>备注：五环外+300元，外地+1000元</span></p>
                        <el-button type="primary">立即下单</el-button>
                    </div>

                  </div>
              </div>
              <div class="video">
                <p class="videotitle"><span>视频样片</span></p>
                <p class="videobox">
                    <span>视频1：“珍爱一生”西式婚礼</span>
                    <span>视频2：“珍爱一生”西式婚礼</span>
                    <span>视频3：“珍爱一生”西式婚礼</span>
                </p>
                <p class="videotitle"><span>个人介绍</span></p>
                <div class="intro">
                    <div class="introbox">
                        <div class="imgbox"><img src="../../../assets/imgs/p1.jpg" alt=""></div>
                        <div class="introdesc">
                            <p>两姓联姻，一堂缔约，良缘永结，匹配同称。</p>
                            <p>看此日桃花灼灼，宜室宜家，卜他年瓜瓞绵绵，尔昌尔炽。</p>
                            <p>谨以白头之约，书向鸿笺，好将红叶之盟，载明鸳谱。此证。</p>
                        </div>
                    </div>
                    <div class="introbox">
                        <div class="imgbox"><img src="../../../assets/imgs/p2.jpg" alt=""></div>
                        <div class="introdesc">
                            <p>喜今日嘉礼初成，良缘遂缔。诗咏关雎，雅歌麟趾。</p>
                            <p>瑞叶五世其昌，祥开二南之化。同心同德，宜室宜家。</p>
                            <p>相敬如宾，永谐鱼水之欢。互助精诚，共盟鸳鸯之誓。此证！</p>
                        </div>
                    </div>
                    <div class="introbox">
                        <div class="imgbox"><img src="../../../assets/imgs/p3.jpg" alt=""></div>
                        <div class="introdesc">
                            <p>从兹缔结良缘，订成佳偶，赤绳早系，</p>
                            <p>白首永偕，花好月圆，欣燕尔之，</p>
                            <p>将泳海枯石烂，指鸳侣而先盟，谨订此约。</p>
                        </div>
                    </div>
                </div>
              </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <Foot />
    </div>
  </div>
</template>

<script>
import HeadNav from "../../../componnet/qiantai/HeadNav";
import Nav from "../../../componnet/qiantai/Nav";
import Foot from "../../../componnet/qiantai/Foot";
import Tuijian from "../../../componnet/qiantai/Tuijian";

export default {
  name: "HostDetail",
  components: {
    HeadNav,
    Nav,
    Foot,
    Tuijian
  },
  data(){
    return{
      desc:{}
    }
  },
  mounted(){
    this.desc=this.$route.query.data;
    console.log(this.desc);
    
  }
};
</script>

<style scoped>
/* 广告部分 */
.banner {
  background: url(../../../assets/imgs/t1.jpg) no-repeat 0px 0px;
  background-size: cover;
  padding: 60px 0;
}
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.text-white {
  font-size: 48px;
  text-transform: capitalize;
  text-align: left;
  color: #fff;
  font-weight: 500;
}
.banner h5 {
  margin: 40px 0 20px;
}
.counter {
  font-size: 68px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #00b6e3;
  margin: 16px 0;
}
.stats-text h3 {
  font-size: 30px;
}
/* 推荐主持人 */
.content{
    margin: 30px 80px;
}
.title{
    width: 300px;
    height: 60px;
    line-height: 60px;
    background: pink;
    padding:10px 100px 10px 20px;
    font-size: 26px;
    font-weight: 800;
    color: black;
}
.tuijian-box {
  padding: 0 40px;
  box-sizing: border-box;
}
.tuijian-box .el-col {
  margin: 20px 0;
  box-sizing: border-box;
  position: relative;
  height: 300px;
}
.tuijian-box .el-col > img {
  border-width: 0px;
  position: absolute;
  width: 86px;
  height: 66px;
  top: -15px;
  left: -20px;
}
.tuijian-box .el-col > span {
  position: absolute;
  width: 86px;
  height: 30px;
  top: 5px;
  left: -20px;
  text-align: center;
}
.tuijian-box .imgbox {
  width: 270px;
  height: 260px;
  margin-right: 40px;
}
.tuijian-box .grid-content img {
  width: 270px;
  height: 260px;
}
.tuijian-box .grid-content p {
  height: 32px;
  line-height: 32px;
  background: #b3bdca;
  /* padding-left: 10px; */
  padding: 10px 0 10px 10px;
}
.tuijian-box .grid-content span {
  width: 80px;
  display: inline-block;
}
.tuijian-box .grid-content .price {
  width: 140px;
  display: inline-block;
}
/*  */
.infobox::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;

}
.infobox>div{
    float: left;
}
.infobox .imgbox{
    width: 340px;
    height: 330px;
}
.infobox .imgbox>img{
    width: 340px;
    height: 330px;   
}
.infobox .info{
    padding: 30px 40px;
    width: 460px;
}
.info .infotitle{
    width: 520px;
    height: 60px;
    line-height: 60px;
    color: black;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}
.infotitle p{
    font-size: 40px;
    font-weight: 800;    
}
.infotitle span{
    font-size: 24px;
    padding-left: 30px;   
}
.desc p{
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin: 10px 0;
}
.desc .el-button{
    padding: 28px 70px;
    margin-left: 60px;
}
/* 视频 */
.video .videotitle{
    width: 650px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: pink;
    font-size: 28px;
    font-weight: 800;
    color: black;
    padding: 0 200px;
}
.videobox{
    margin: 20px 0;
    padding-left:20px ;
}
.videobox span{
    width: 260px;
    height: 46px;
    line-height: 46px;
    display: inline-block;
    background: #4F464B;
    padding: 8px 10px;
    margin-right: 30px;
    text-align: center;
    color: #fff;
}
/* 个人介绍 */
.introbox::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.introbox{
    padding:20px 25px;
    margin: 30px 0;
    width: 1000px;
    background: firebrick;
}
.introbox div{
    float: left;
}
.introbox .imgbox{
    width: 400px;
    height: 300px;
}
.introbox>.imgbox>img{
    width: 400px;
    height: 300px;
}
.introbox .introdesc{
    padding: 20px 40px;
    width: 520px;
    height: 300px;
    box-sizing: border-box;
}
.introbox .introdesc p{
    color: black;
    margin: 10px 0;
    font-size: 26px;
    font-weight: 800;
}
</style>